import React, { useEffect, useState } from "react";
const { dialog } = require("electron");
import { ForwardPopup } from "../message/components/forwardPopup";
import {
  RENDERPROCESSCALL,
  SHOWDIALOG,
  SUPPORT_IMAGE_TYPE,
  SELECT_PICTURE,
} from "../../../app/const/const";
import { ipcRenderer } from "electron";
import { useDispatch } from "react-redux";
import { getLoginUserID, sendForwardMessage } from "../../api";
import { getConvId, getConvType } from "../../utils/messageUtils";
import "./transpond.scss";
import { Button, message } from "tea-component";

export const Transpond = () => {
  const [isTransimitPopup, setTransimitPopup] = useState(false);
  const [files, setFiles] = useState([]);
  const upload = () => {
    ipcRenderer.send(RENDERPROCESSCALL, {
      type: SELECT_PICTURE,
      params: {
        fileType: "image",
        extensions: SUPPORT_IMAGE_TYPE,
        multiSelections: false,
      },
    });
  };
  useEffect(() => {
    const listener = (event, params) => {
      const { triggerType, files } = params;
      switch (triggerType) {
        case "SELECT_PICTURE": {
          console.log(files);
          setFiles(files);
          break;
        }
      }
    };
    ipcRenderer.on("GET_FILE_INFO_CALLBACK", listener);
    return () => {
      ipcRenderer.off("GET_FILE_INFO_CALLBACK", listener);
    };
  }, []);
  const handleForwardPopupSuccess = async (convItemGroup) => {
    const userId = await getLoginUserID();

    const seletedMessage = files.map((item) => {
      let obj = {
        message_is_forward_message: false,
        message_conv_type: 2,
        message_elem_array: [
          {
            elem_type: 1,
            image_elem_orig_path: item.path,
            image_elem_level: 1,
            // image_elem_format: item.type,
            image_elem_orig_pic_size: item.size,
          },
        ],
      };
      return obj;
    });

    convItemGroup.forEach(async (convItem, k) => {
      Promise.all(
        seletedMessage.map(async (msg) => {
          const {
            data: { code, json_params },
          } = await sendForwardMessage({
            convId: getConvId(convItem),
            convType: getConvType(convItem),
            message: msg,
            userId,
          });
          return code;
        })
      ).then((res) => {
        setTransimitPopup(false);
        setFiles([]);
      });
    });
  };

  const send = () => {
    if (!files.length) {
      message.warning({
        content: "请先选择文件",
      });
      return;
    }
    setTransimitPopup(true);
  };
  return (
    <div className="meeting">
      <div className="meeting-feature">
        <div className="meeting-feature__item" onClick={upload}>
          <span className="meeting-feature__item--create-meeting" />
          选择图片
        </div>
        <div className="meeting-feature__item" onClick={send}>
          <span className="meeting-feature__item--join-meeting" />
          发送图片
        </div>
      </div>
      {isTransimitPopup && (
        <ForwardPopup
          onSuccess={handleForwardPopupSuccess}
          onClose={() => {
            setTransimitPopup(false);
          }}
        />
      )}
      <div className="meeting-history">
        <div className="meeting-history__header">
          <span className="meeting-history__header--icon"></span>
          <span className="meeting-history__header--text">图片列表</span>
        </div>
        <div className="imgList">
          {files.map((item, index) => (
            <img
              className="fileImg"
              key={index}
              width={300}
              src={item.path}
              alt=""
            />
          ))}
        </div>
      </div>
    </div>
  );
};
